import React, { Component } from 'react';
import ReactEcharts from "echarts-for-react";
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title"; // 此处是按需引

class BasicGraph extends React.Component {
    echartRef = {}
    constructor(props) {
        super(props);
        this.state= {
           data:[],
           categories : [],
           realativities: []
        }
    }
    // componentDidMount() {
    //     // 组件装载完成以后声明一个自定义事件
    //     this.eventEmitter = emitter.addListener('changeRelativities', (message) => {
    //         debugger
    //         this.setState({
    //             data:message.nodes,
    //             relativities:message.relativities,
    //         });
    //     });
    // }
    // componentWillUnmount() {
    //     emitter.removeListener(this.eventEmitter);
    // }


    getOption = () =>{
        
        return{
            title: {
                text: ''
              },
              tooltip: {},
              animationDurationUpdate: 1500,
              animationEasingUpdate: 'quinticInOut',
              series: [
                {
                  type: 'graph',
                  layout: 'none',
                  symbolSize: 50,
                  roam: true,
                  label: {
                    show: true
                  },
                  edgeSymbol: ['circle', 'arrow'],
                  edgeSymbolSize: [4, 1],
                  edgeLabel: {
                    fontSize: 20
                  },
                  data: [
                    {
                      name: '症状',
                      x: 300,
                      y: 300,
                      symbol: 'circle'
                    },
                    {
                      name: '方剂',
                      x: 550,
                      y: 200,
                      symbol: 'rect'
                    },
                    {
                      name: '药剂',
                      x: 800,
                      y: 300,
                      symbol: 'diamond',
                      symbolSize: '60'
                    }
                  ],
                  // links: [],
                  links: [
                    {
                      source: 0,
                      target: 1,
                      symbolSize: [5, 10],
                      label: {
                        show: false
                      },
                      lineStyle: {
                        width: 2
                      }
                    },
                    {
                      source: 1,
                      target: 2,
                      symbolSize: [5, 10],
                      label: {
                        show: false
                      },
                      lineStyle: {
                        width: 2
                      }
                    }
                  ],
                  lineStyle: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                  }
                }
              ]
          }

    }

    render(){
        return(<div style={{textAlign:"left",display:"inline-block",width:"100%",padding:"0px",margin:"0px"}}>
        <ReactEcharts
        ref={e => this.echartRef = e}
          style={{ minHeight: "100%" , width:"100%",padding:"0px",margin:"0px"}}
          option={this.getOption()}
        //   notMerge = {true}
          theme={"theme_name"}
          // onChartReady={this.onChartReadyCallback}
        //   onEvents={EventsDict}
        />
        </div>)
    }
}

export default BasicGraph;